<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import gl from '../mixins/gl_fun'
export default {
  name: "01",
  mixins: [gl],
  mounted() {
    console.log(this.createShader)
    const vertex = `
    attribute vec4 a_position;
    void main(){
        gl_Position = a_position;
    }
    `;
    const fragment = `
    precision mediump float;
    void main(){
        gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0);
    }
    `;
    let canvas = this.$refs.canvas;
    let gl = canvas.getContext('webgl');
    if (!gl) return 
    console.log(gl); 
    let vertexShader = this.createShader(gl, gl.VERTEX_SHADER, vertex);
    let fragmentShader = this.createShader(gl, gl.FRAGMENT_SHADER, fragment);

    let program = this.createProgram(gl, vertexShader, fragmentShader);

    //查找顶点数据需要去的地方。
    let positionAttributeLocation = gl.getAttribLocation(program, "a_position");

    //创建一个缓冲区并在其中放置三个二维剪辑空间点
    let positionBuffer = gl.createBuffer();
    //将其绑定到ARRAY\u BUFFER（将其视为ARRAY\u BUFFER=positionBuffer）
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    let point = [0,0,  0,0.5, 0.7,0];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(point), gl.STATIC_DRAW);

    this.resizeCanvasToDisplaySize(gl.canvas);
    //告诉WebGL如何从剪辑空间转换为像素
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    //清理画布
    gl.clearColor(0,0,0,0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //告诉它使用我们的程序（一对着色器）
    gl.useProgram(program);

    //启用属性
    gl.enableVertexAttribArray(positionAttributeLocation);

    //绑定位置缓冲区。
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    //告诉属性如何从positionBuffer（ARRAY\u BUFFER）中获取数据
    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

    let primitiveType = gl.TRIANGLES;
    gl.drawArrays(gl.TRIANGLES, 0, point.length / 2);
  }
}
</script>

<style scoped>

</style>